<template>
    <div class="scene">
        <div id="container" v-show="sceneType">
            <canvas id="c"></canvas>
            <div id="info">{{datetime}}UTC</div>
        </div>
        <div id="container_2d" v-show="!sceneType">
            <canvas id="c_2d"></canvas>
            <div id="info_2d">{{datetime}}UTC</div>
        </div>

        <div class="color-bar">
            <ColorBar :legendIndex="0" v-show="e02LegendStatus" />
            <ColorBar :legendIndex="1" v-show="pxxLegendStatus" />
            <ColorBar :legendIndex="2" v-show="atmosLegendStatus" />
            <ColorBar :legendIndex="3" v-show="saaAPLegendStatus" />
            <ColorBar :legendIndex="4" v-show="saaAELegendStatus" />
            <ColorBar :legendIndex="5" v-show="magnetoLegendStatus" />
        </div>
    </div>
</template>
<script>
import ColorBar from "../ColorBar";
export default {
    name: "ThirdDScene",
    components: {
        ColorBar
    },
    data() {
        return {
            type: '',
            datetime: dateFormat("yyyy/MM/dd hh:mm:ss", new Date(2012, 5, 16, 12, 0, 0), false),
            // datetime: dateFormat("yyyy/MM/dd hh:mm:ss", new Date(2022, 3, 19, 1, 0, 0), false),
            // sceneType true->3d; false->2d
            sceneType: true,
            timer: null,
            timerUpdateDatetime: null,

            legendIndex: 0,
            saaAPLegendStatus: false,
            saaAELegendStatus: false,
            e02LegendStatus: true,
            pxxLegendStatus: true,
            atmosLegendStatus: true,
            magnetoLegendStatus: false
        }
    },
    watch: {

    },
    mounted() {
    },
    methods: {
    },
    beforeUnmount() {
    }
}
</script>
<style lang="scss" scoped>
.scene{
    width: 100%;
    height: 100%;
}
    #container{
        position: relative;
        width: 100%;
        height: 100%;
        // overflow: hidden;
    }
    #c {
        width: 100%;
        height: 100%;
        display: block;
    }
    #info {
        position: absolute;
        bottom: 110px;
        right: 30px;
        width: 350px;
        line-height: 50px;
        color: white;
        font-size: 24px;
        /*padding: 10px;*/
        /*box-sizing: border-box;*/
        /*text-align: center;*/
        /*-moz-user-select: none;*/
        /*-webkit-user-select: none;*/
        /*-ms-user-select: none;*/
        /*user-select: none;*/
        /*pointer-events: none;*/
        /*z-index: 1; !* TODO Solve this in HTML *!*/
    }
    #container_2d{
        position: relative;
        width: 100%;
        height: 100%;
        background-color: #42b983;
        // overflow: hidden;
    }
    #c_2d {
        width: 100%;
        height: 100%;
        display: block;
    }
    #info_2d {
        position: absolute;
        bottom: 110px;
        right: 30px;
        width: 350px;
        line-height: 50px;
        color: black;
        font-size: 24px;
        /*padding: 10px;*/
        /*box-sizing: border-box;*/
        /*text-align: center;*/
        /*-moz-user-select: none;*/
        /*-webkit-user-select: none;*/
        /*-ms-user-select: none;*/
        /*user-select: none;*/
        /*pointer-events: none;*/
        /*z-index: 1; !* TODO Solve this in HTML *!*/
    }
    .color-bar {
        position: absolute;
        bottom: 50px;
        right: 30px;
        z-index: 10;
    }
</style>